<template>
  <section class="task_review">
    <PendingTask ref="PendingTask" :isReview = "'1'" :hasDepart="'0'" @getCurrentTask="getCurrentTask" @getCurrentTaskDetail="getCurrentTaskDetail" @getTaskIndex="getTaskIndex">
      <template slot-scope="props">
          <div :index="props.index" :key="props.index" ref="task" v-if="props.index === taskIndex && isShowTaskDetail">
            <div class="task_detail" v-if="JSON.stringify(townsList) != '{}'">
              <div class="task_detail_content" v-if="currentTask.id" v-loading="taskDetailLoading">
                <el-card shadow="never" class="el_card_content">
                    <div style="text-align: left;font-size: 16px;line-height: 40px">
                      <el-row v-if="currentTask.taskType == '综合年度考核' && currentTask.objectType == 'Depart'" style="margin: 10px 0">
                        <el-col :span="1" style="text-align: center;color: #43C089;font-weight: bold">镇级单位</el-col>
                        <el-col :span="23" >
                              <div v-for="(item, index) in currentTaskDetail" :key="index" :class="`townStyle ${activeTownIndex == index ? 'townStyleActive' : ''}`" @click="updateTownIndex(item, index)">{{item.objectName.replace(/党委/,'')}}</div>
                        </el-col>
                      </el-row>
                      <el-row v-if="currentTask.taskType == '综合年度考核'" style="margin: 10px 0">
                        <el-col :span="1" style="text-align: center;color: #43C089;font-weight: bold">村级单位</el-col>
                        <el-col :span="23" >
                              <div  v-for="(item, index) in townsList[districtId].orgChildren" :key="item.index" :class="`townStyle ${activeVillageIndex == index ? 'townStyleActive' : ''}`"  @click="updateVillageIndex(item, index)">{{item.districtName.replace(/支部/,'')}}</div>
                        </el-col>
                      </el-row>
                    </div>
                    <div>
                      <div class="check_button">
                        <el-button size="large" @click="showCheckDialog" type="primary">审核</el-button>
                      </div>
                      <p style="clear: both"></p>
                    </div>
                    <div style="clear: both"></div>
                    <div class="tack_quota_content">
                        <el-row :gutter="30" v-if="currentTask.taskType == '综合年度考核'">
                          <el-col class="task_review_content" :span="16">
                            <el-collapse class="accordion" v-model="activeSynthesisName">
                              <el-collapse-item v-for="item in synthesisQuotaList" :key="item.index" :title="item.quotaName + '(' + item.quotaScore + '分)' " :name="item.quotaName">
                                <div class="resultContent">
                                    <div class="outDiv" >
                                      <div class="table_col" style="border-bottom: 1px solid #AEE3CC">
                                        <div class="twoIndex">二级指标</div>
                                        <div  style="display:inline-block; border-left:1px solid #AEE3CC;">
                                            <!-- <div class="lastResultBorder thirdIndex">三级指标</div> -->
                                            <div class="lastResultBorder scoreIndex" v-if="item.quotaName.indexOf('政治站位')==-1">分值</div>
                                            <!-- <div v-if="item.quotaName == '日常工作'" class="lastResultBorder cunDetail">分数</div> -->
                                            <div class="lastResultBorder cunDetail" v-if="item.quotaName.indexOf('政治站位')==-1">得分</div>
                                            <div class="lastResultBorder cunDetail" v-if="item.quotaName.indexOf('日常表现')!==-1">等次</div>
                                            <div class="lastResultBorder cunDetail" v-if="item.quotaName.indexOf('政治站位')!==-1">等次</div>
                                            <div class="lastResultBorder cunDetail" v-if="item.quotaName.indexOf('村级实绩')!==-1">等次</div>
                                            <div class="lastResultBorder cunDetail" v-if="item.quotaName.indexOf('素能评价')!==-1">测试得分</div>
                                            <div class="lastResultBorder cunDetail" v-if="item.quotaName.indexOf('村级实绩')!==-1">换算得分</div>
                                            <div class="lastResultBorder cunDetail">操作</div>
                                        </div>
                                      </div>
                                      <div v-for="(secondItem, secondIndex) in item.kpiQuotas" style="border-bottom: 1px solid #AEE3CC" :key="secondIndex">
                                          <div class="twoIndex" style="vertical-align: top">
                                            <el-tooltip :content="secondItem.quotasName" placement="top" v-if="secondItem.quotasName&&secondItem.quotasName.length>15">
                                                <span>{{secondItem.quotasName.substring(0,15)}}...</span>
                                            </el-tooltip>
                                            <span v-else>
                                              <span>{{secondItem.quotasName}}</span>
                                            </span>
                                            <span class="el-icon-picture sonIcon" title="查看佐证材料" v-if="secondItem.attachment&&secondItem.attachment.address" @click="checkAttachment(secondItem.attachment.address)"></span>
                                            <span class="el-icon-picture sonIcon" title="查看佐证材料" v-if="Array.isArray(secondItem.attachment)&&secondItem.attachment.some(item => { if(item.address){ return true } })" @click="checkAttachment(secondItem.attachment)"></span>
                                          </div>
                                          <div class="threeIndex" style="display:inline-block; border-left:1px solid #AEE3CC">
                                            <div v-if="item.kpiQuotas.length>0 && (secondItem.quotasName == '日常表现' || secondItem.quotasName == '村级实绩' || secondItem.quotasName == '政治站位')">
                                                <div v-if="secondItem.quotasName !== '政治站位'" :class="secondItem.thirdRes&&secondItem.thirdRes.length-1?'resultBorder scoreIndex':'lastResultBorder scoreIndex'">{{secondItem.quotaScore ? secondItem.quotaScore : '无'}}</div>
                                                <div v-if="item.quotaName.indexOf('村级实绩')!==-1 && secondItem.thirdRes[2]" :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'">{{secondItem.thirdRes[2].value ? secondItem.thirdRes[2].value : '无'}}</div>
                                                <div v-if="item.quotaName.indexOf('村级实绩')!==-1 && secondItem.thirdRes[1]" :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'">{{secondItem.thirdRes[1].value ? secondItem.thirdRes[1].value : '无'}}</div>
                                                <div v-if="secondItem.thirdRes[0] && secondItem.quotasName !== '政治站位'" :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'">{{secondItem.thirdRes[0].value ? secondItem.thirdRes[0].value : '无'}}</div>
                                                <div v-if="item.quotaName.indexOf('日常表现')!==-1 && secondItem.thirdRes[1]" :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'">{{secondItem.thirdRes[1].value ? secondItem.thirdRes[1].value : '无'}}</div>
                                                <div v-if="item.quotaName.indexOf('政治站位')!==-1 && secondItem.thirdRes[1]" :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'">{{secondItem.thirdRes[1].value ? secondItem.thirdRes[1].value : '无'}}</div>
                                                <div :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'"><el-button size="mini" type="success" @click="addRejectList(secondItem.villageQuota)">{{secondItem.villageQuota.state == '1' ? '取消加入' : '加入驳回列表'}}</el-button></div>
                                            </div>
                                            <div v-if="item.kpiQuotas.length>0 && !thirdItem.isQuota && secondItem.quotasName !== '日常表现' && secondItem.quotasName !== '村级实绩' && secondItem.quotasName !== '政治站位'" v-for="(thirdItem, thirdIndex) in secondItem.thirdRes" :key="thirdIndex">
                                                <div v-if="!thirdItem.isQuota" :class="secondItem.thirdRes&&secondItem.thirdRes.length-1?'resultBorder scoreIndex':'lastResultBorder scoreIndex'">{{secondItem.quotaScore ? secondItem.quotaScore : '无'}}</div>
                                                <div v-if="!thirdItem.isQuota" :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'">{{thirdItem.value ? thirdItem.value : '无'}}</div>
                                                <div v-if="item.quotaName.indexOf('素能评价')!==-1 && secondItem.thirdRes[1]" :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'">{{ secondItem.quotasName.indexOf('行政能力研判') == -1 ? (secondItem.thirdRes[1].value ? secondItem.thirdRes[1].value : '无') : '/'}}</div>
                                                <div :class="secondItem.thirdRes.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'"><el-button size="mini" type="success" @click="addRejectList(secondItem.villageQuota)">{{secondItem.villageQuota.state == '1' ? '取消加入' : '加入驳回列表'}}</el-button></div>
                                            </div>
                                          </div>
                                      </div>
                                    </div>
                                </div>
                                <div class="materials">
                                  <div v-if="secondItem.thirdRes.some(item => { if(item.isQuota){ return true } }) && item.quotaId.indexOf('03') !== -1 ||item.quotaId.indexOf('06') !== -1" v-for="(secondItem, secondIndex) in item.kpiQuotas" :key="secondIndex" class="materials_item second_monitor">
                                    <div class="second_title">
                                      <span>二级指标：{{secondItem.quotasName}}</span>
                                      <div v-if="thirdItem.isQuota" v-for="(thirdItem, thirdIndex) in secondItem.thirdRes" :key="thirdIndex" class="third_title">
                                          <div>
                                            <div :style="`${thirdItem.value && Array.isArray(thirdItem.value) && 'float:none'}`" class="third_content">{{thirdItem.quotasName}}:&nbsp;&nbsp;</div>
                                            <!-- <div style="float:none" v-if="thirdItem.value && Array.isArray(thirdItem.value)" v-for="(quesItem, quesIndex) in thirdItem.value">问题{{quesIndex+1}}：{{quesItem.quesContent}}</div> -->
                                            <span v-if="thirdItem.value && thirdItem.value.indexOf('http') == -1 && !Array.isArray(thirdItem.value)">{{thirdItem.value}}</span>
                                            <span class="el-icon-picture sonIcon" title="查看佐证材料" v-else-if="thirdItem.value && thirdItem.value.indexOf('http') !== -1 && !Array.isArray(thirdItem.value)" @click="checkAttachment(thirdItem.value)"></span>
                                            <!-- <div class="third_value" v-else>{{'无'}}</div> -->
                                          </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div v-if="secondItem.thirdRes.some(item => { if(item.isQuota){ return true } }) && item.quotaId.indexOf('05') !== -1" v-for="(secondItem, secondIndex) in item.kpiQuotas" :key="secondIndex+'info'" class="materials_item second_synthesis">
                                    <div class="second_title">
                                      <span>二级指标：{{secondItem.quotasName}}</span>
                                      <div class="allCunScore">
                                          <h3>镇机关人员综合评议得分：{{secondItem.thirdRes[5].value}}</h3>
                                          <!-- <div class="tableContent">
                                              <h4 style="text-align: center; margin-bottom: 0" class="tableBorder">镇机关人员综合评议表</h4>
                                              <div style="display: flex">
                                                  <div style="flex:3" class="tableBorder">综合评议</div>
                                                  <div style="flex:4">
                                                      <div style="display: flex">
                                                          <div class="tableResult">优秀</div>
                                                          <div class="tableResult">称职</div>
                                                          <div class="tableResult">基本称职</div>
                                                          <div class="tableResult">不称职</div>
                                                      </div>
                                                      <div style="display: flex">
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[1].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[2].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[3].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[4].value}}</span>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div> -->
                                      </div>
                                      <div class="allCunScore">
                                          <h3>村“两委”干部测评得分：{{secondItem.thirdRes[10].value}}</h3>
                                          <div class="tableContent">
                                              <h4 style="text-align: center; margin-bottom: 0" class="tableBorder">村“两委”干部测评表</h4>
                                              <div style="display: flex">
                                                  <div style="flex:3" class="tableBorder">综合评议</div>
                                                  <div style="flex:4">
                                                      <div style="display: flex">
                                                          <div class="tableResult">优秀</div>
                                                          <div class="tableResult">称职</div>
                                                          <div class="tableResult">基本称职</div>
                                                          <div class="tableResult">不称职</div>
                                                      </div>
                                                      <div style="display: flex">
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[6].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[7].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[8].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[9].value}}</span>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                      <div class="allCunScore">
                                          <h3>党员群众满意度调查得分：{{secondItem.thirdRes[15].value}}</h3>
                                          <div class="tableContent">
                                              <h4 style="text-align: center; margin-bottom: 0" class="tableBorder">党员群众满意度调查表</h4>
                                              <div style="display: flex">
                                                  <div style="flex:3" class="tableBorder">总体评价</div>
                                                  <div style="flex:4">
                                                      <div style="display: flex">
                                                          <div class="tableResult">满意</div>
                                                          <div class="tableResult">比较满意</div>
                                                          <div class="tableResult">基本满意</div>
                                                          <div class="tableResult">不满意</div>
                                                      </div>
                                                      
                                                      <div style="display: flex">
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[11].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[12].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[13].value}}</span>
                                                          </div>
                                                          <div class="tableResult">
                                                            <span>{{secondItem.thirdRes[14].value}}</span>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div v-if="secondItem.thirdRes.some(item => { if(item.isQuota){ return true } }) && item.quotaId.indexOf('04') !== -1 && secondItem.quotasName.indexOf('行政能力研判') !== -1" v-for="(secondItem, secondIndex) in item.kpiQuotas" :key="secondIndex+'info'" class="materials_item second_synthesis">
                                    <div class="second_title">
                                      <span>二级指标：{{secondItem.quotasName}}</span>
                                      <div v-if="thirdItem.isQuota" v-for="(thirdItem, thirdIndex) in secondItem.thirdRes" :key="thirdIndex" class="allCunScore">
                                          <div class="tableContent">
                                              <h4 style="text-align: center; margin-bottom: 0" class="tableBorder">{{thirdItem.quotasName}}</h4>
                                              <div style="display: flex">
                                                  <div style="flex: 4;">
                                                      <div class="tableBorder">胜任力</div>
                                                      <div style="display: flex">
                                                          <div class="tableResult">优秀</div>
                                                          <div class="tableResult">良好</div>
                                                          <div class="tableResult">一般</div>
                                                          <div class="tableResult">差</div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div v-for="(sub,subIndex) in thirdItem.value" :key="subIndex" style="display: flex" v-if="subIndex<5">
                                                  <!-- <div class="tableResult">{{sub.indexNum}}</div>
                                                  <div style="flex: 2" class="tableBorder">{{sub.commentProject}}</div> -->
                                                  <div class="tableResult">
                                                      {{sub.good == undefined ? '无' : sub.good}}
                                                  </div>
                                                  <div class="tableResult">
                                                      {{sub.preferably}}
                                                  </div>
                                                  <div class="tableResult">
                                                      {{sub.commonly}}
                                                  </div>
                                                  <div class="tableResult">
                                                      {{sub.bad}}
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </el-collapse-item>
                            </el-collapse>
                          </el-col>
                          <el-col :class="`materials_area_content ${(images.length || imagesArr.length) ? '' : 'materials_area_content_img'}`" :span="8" >
                            <!-- <CheckVerify :districtId="districtId"></CheckVerify> -->
                            <div class="materials_area">
                              <div class="materials_title">
                                <p style="margin-left: 10px">佐证材料</p>
                              </div>
                              <div class="materials_content">
                                <div v-for="item in imagesArr" :key="item.index">
                                  <p>{{item.quarter ? item.quarter : ''}}</p>
                                  <viewer :images="item.address">
                                    <img :src="subItem" v-for="subItem in item.address" :key="subItem.index" style="max-width: 450px;height: auto;margin: 20px 12px;" />
                                  </viewer>
                                </div>
                                <viewer :images="images">
                                  <img :src="item" v-for="item in images" :key="item.index" style="max-width: 450px;height: auto;margin: 20px 12px;" />
                                </viewer>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                        <!-- <el-row :gutter="30" v-if="currentTask.taskType == '日常工作考核'">
                          <el-col class="task_review_content" :span="16">
                            <el-collapse class="accordion" v-model="activeDailyName">
                              <el-collapse-item v-for="item in dailyQuotaList" :key="item.index" :title="item.quotaName + '(' + item.quotaScore + '分)' " :name="item.quotaName">
                                <div class="resultContent">
                                  <div class="outDiv daily_div" >
                                      <div class="table_col">
                                          <div class="twoIndex">二级指标</div>
                                          <div  style="display:inline-block; border-left:1px solid #AEE3CC;">
                                              <div class="lastResultBorder thirdIndex">三级指标</div>
                                              <div class="lastResultBorder scoreIndex" style="color: #000">分值</div>
                                              <div class="lastResultBorder cunDetail" style="color: #000" v-for="(item,index) in currentAllVillageList" :key="index">
                                                  <el-tooltip :content="item.districtName" placement="top" v-if="item.districtName&&item.districtName.length>5">
                                                      <div>{{item.districtName.substring(0,5)}}...</div>
                                                  </el-tooltip>
                                                  <div v-else>
                                                      {{item.districtName}}
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                      <div class="table_col" v-for="(secondItem, secondIndex) in item.kpiQuotas" :key="secondIndex">
                                          <div class="twoIndex" style="vertical-align: top">
                                            <el-tooltip :content="secondItem.quotaName" placement="top" v-if="secondItem.quotaName&&secondItem.quotaName.length>15">
                                                <span>{{secondItem.quotaName.substring(0,15)+ '(' + secondItem.quotaScore + '分)'}}...</span>
                                                <span class="el-icon-picture sonIcon" title="查看佐证材料" v-if="secondItem.attachment&&secondItem.attachment.address" @click="checkAttachment(secondItem.attachment.address)"></span>
                                            </el-tooltip>
                                            <div v-else>
                                              {{secondItem.quotaName}}&nbsp;({{secondItem.quotaScore}}分)
                                              <span class="el-icon-picture sonIcon" title="查看佐证材料" v-if="secondItem.attachment&&secondItem.attachment.address" @click="checkAttachment(secondItem.attachment.address)"></span>
                                            </div>
                                          </div>
                                          <div style="display:inline-block; border-left:1px solid #AEE3CC;">
                                              <div class="daily_three_index"  v-if="secondItem.kpiTownQuotas&&secondItem.kpiTownQuotas.length>0">
                                                  <div v-for="(thirdItem, thirdIndex) in secondItem.kpiTownQuotas" :key="thirdIndex">
                                                      <div v-if="thirdItem.quotaName" class="third_item_detail">
                                                        <div :class="thirdIndex<secondItem.kpiTownQuotas.length-1?'resultBorder thirdIndex':'lastResultBorder thirdIndex'" >
                                                            <el-tooltip :content="thirdItem.quotaName" placement="top" v-if="thirdItem.quotaName&&thirdItem.quotaName.length>20">
                                                                <span>{{thirdItem.quotaName.substring(0,20)}}...</span>
                                                            </el-tooltip>
                                                            <div v-else>
                                                              {{thirdItem.quotaName}}
                                                            </div>
                                                        </div>
                                                        <div :class="thirdIndex<secondItem.kpiTownQuotas.length-1?'resultBorder scoreIndex':'lastResultBorder scoreIndex'">{{thirdItem.score||'无'}}</div>
                                                        <div :class="thirdIndex<secondItem.kpiTownQuotas.length-1?'resultBorder cunDetail':'lastResultBorder cunDetail'"
                                                            v-for="(subScoreItem,subScoreItemIndex) in thirdItem.kpiVillageQuotas"
                                                            :key="subScoreItemIndex"
                                                            >{{subScoreItem.score ? subScoreItem.score + "分" : '无'}}</div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div v-else>
                                                <div class="lastResultBorder thirdIndex">&nbsp;</div>
                                                <div class="lastResultBorder scoreIndex">&nbsp;</div>
                                                <div class="lastResultBorder cunDetail" v-for="item in currentAllVillageList">&nbsp;</div>
                                              </div>
                                          </div>
                                        </div>
                                  </div>
                                  <div style="clear: both"></div>
                                </div>
                              </el-collapse-item>
                            </el-collapse>
                          </el-col>
                          <el-col :class="`materials_area_content ${images.length ? '' : 'materials_area_content_img'}`" :span="8">
                            <div class="materials_area">
                              <div class="materials_title">
                                <p style="margin-left: 10px">佐证材料</p>
                              </div>
                              <viewer :images="images" class="materials_content">
                                  <img v-for="item in images" :src="item" :key="item" style="max-width: 450px;height: auto;margin: 20px 12px;"/>
                              </viewer>
                            </div>
                          </el-col>
                        </el-row> -->
                    </div>
                    <div v-if="currentTask.id" class="confirm_content">
                      <el-row :gutter="20">
                        <el-col class="confirm_content_pending" :span="8">
                          <el-card shadow="never">
                            <div class="title_pending">待审核组织</div>
                            <div  class="detail" v-if="uncheckedList.length">
                              <div v-for="(item, index) in uncheckedList" :key="index" class="task_item">
                                <span class="detailLabel">{{item.objectName}}</span>
                              </div>
                            </div>
                            <div v-else>
                              <p>暂无待审核组织</p>
                            </div>
                          </el-card>
                        </el-col>
                        <el-col class="confirm_content_success" :span="8">
                          <el-card shadow="never">
                            <div class="title_pending">已通过组织</div>
                            <div  class="detail" v-if="successList.length">
                              <div v-for="(item, index) in successList" :key="index" class="task_item">
                                <span class="detailLabel">{{item.objectName}}</span>
                              </div>
                            </div>
                            <div v-else>
                              <p>暂无已通过组织</p>
                            </div>
                          </el-card>
                        </el-col>
                        <el-col class="confirm_content_failed" :span="8">
                          <el-card shadow="never">
                            <div class="title_pending">已驳回组织</div>
                            <div  class="detail" v-if="failedList.length">
                              <div v-for="(item, index) in failedList" :key="index" class="task_item">
                                <span class="detailLabel">{{item.objectName}}</span>
                              </div>
                            </div>
                            <div v-else>
                              <p>暂无已驳回组织</p>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </div>
                </el-card>
              </div>
            </div>
          </div>
      </template>
    </PendingTask>
    <el-dialog
      title="审核"
      :visible.sync="checkVisible"
      width="50%"
      append-to-body>
      <el-row style="margin-top: 5px">
        <el-col :span="2">
            &nbsp;
        </el-col>
        <el-col :span="8" style="text-align: left;padding-top: 20px">
            <el-form :model="reviewForm" ref="reviewForm" label-width="80px" :rules="rules">
                <el-form-item label="审核人" prop="auditor">
                    <el-input v-model="reviewForm.auditor"></el-input>
                </el-form-item>
                <el-form-item label="审核意见" prop="auditAdvice">
                    <el-input v-model="reviewForm.auditAdvice" type="textarea" :rows="2"></el-input>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" :loading="confirmLoading" @click="reviewConfirm('SUCCESS')">通过</el-button>
                    <el-button type="danger" :loading="confirmLoading" @click="reviewConfirm('FAILED')">驳回</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="14">
            &nbsp;
        </el-col>
      </el-row>
    </el-dialog>
  </section>
</template>

<script>
import PendingTask from "@/components/PendingTask";
import CheckVerify from "@/components/CheckVerify";

export default {
  name: 'TaskReview',
  data(){
    return{
      rules:{
          auditor: [
              { required: true, message: '审核人不能为空', trigger: 'blur' }
          ],
          auditAdvice: [
              { required: true, message: '审核意见不能为空', trigger: 'blur' }
          ]
      },
      isShowTaskDetail: true,
      confirmLoading: false,
      taskDetailLoading: false,
      activeDailyName: [],
      activeSynthesisName: [],
      districtId: '',
      taskList: [],
      currentTaskDetail: [],
      currentTask: {},
      taskIndex: -1,
      activeTownIndex: 0,
      activeVillageIndex: 0,
      currentTaskObject: {},
      quotaList: [],
      dailyQuotaList: [],
      synthesisQuotaList: [],
      towns: [],
      townsList: [],
      checkVisible: false,
      reviewForm: {
        auditor: '',
        auditAdvice: ''
      },
      successList: [],
      failedList: [],
      uncheckedList: [],
      images: [],
      imagesArr: []
    }
  },
  components: {
    PendingTask,
    CheckVerify
  },
  methods: {
    async updateTownIndex(item, index) {
      this.taskDetailLoading = true;
      this.activeTownIndex = index;
      this.currentTaskObject = item;
      this.getIsApproved();
      this.districtId = item.objectId;
      if (this.currentTask.taskType == "日常工作考核") {
        const res = await this.$http('GET', `/identity/kPITownQuota/commonWork?taskId=${this.currentTask.taskId}&districtId=${item.objectId}&quarter=${this.currentTask.taskQuarter}&taskYear=${this.currentTask.taskYear}`, false);
        this.currentAllVillageList = [];
        this.currentAllVillageList = res[0].kpiQuotas[0].kpiTownQuotas[0].kpiVillageQuotas;
        this.dailyQuotaList = res;
        this.activeDailyName = [];
        res.forEach(item => {
          this.activeDailyName.push(item.quotaName);
        });
        this.taskDetailLoading = false;
      } else {
        console.log(this.townsList,'this.townsList');
        console.log(this.districtId,'this.districtId');
        this.updateVillageIndex(this.townsList[this.districtId].orgChildren[0], 0)
      }
    },
    async updateVillageIndex (item, index) {
      this.images = [];
      this.taskDetailLoading = true;
      this.activeVillageIndex = index;
      let path = `/identity/kPIVillageQuota/loadVillageAllQuota?districtId=${item.districtId}&taskId=${this.currentTask.taskId}&taskYear=${this.currentTask.taskYear}`;
      if (this.currentTask.objectType == 'Depart') {
        path += `&departDistrictId=${this.currentTask.objectId}`;
      }
      const res = await this.$http('GET', path, false)
      this.activeSynthesisName = [];
      // this.synthesisQuotaList = res;
      res.forEach(item => {
          this.activeSynthesisName.push(item.quotaName)
          // if(item.kpiQuotas.length) {
          //   item.kpiQuotas.map(subItem => {
          //     if(subItem.thirdRes.length) {
          //       subItem.thirdRes.map(thirdItem => {
          //         if(thirdItem.quotasName && (thirdItem.quotasName.indexOf('农村人居环境整治常态化管理')!=-1 || thirdItem.quotasName.indexOf('违法行为处置')!=-1 || thirdItem.quotasName.indexOf('新增土地违法防控')!=-1)) {
          //           let arr = []
          //           let arr2 = []
          //           arr  = thirdItem.value == '' ? [] : thirdItem.value.split('&')
          //           arr.map(item => {
          //             let obj = {}
          //             obj.quesContent = item
          //             arr2.push(obj)
          //           })
          //           thirdItem.value = arr2
          //         }
          //       })
          //     }
          //   })
          // }
      });
      this.synthesisQuotaList = res;
      this.taskDetailLoading = false;
    },
    getTownsList(){
      this.$http('get','identity/villageCadres/findVillageWithoutCadres', false).then(res => {
        console.log(res, '-----------------------');
        const townsList = {}
        for(let key in this.towns) {
          console.log(key,'key');
          townsList[this.towns[key].districtId] = this.towns[key]
        }

        for(let key in townsList) {
          let arr = []
          townsList[key].orgChildren.map(item => {
            let obj = {}
            if (res.indexOf(item.districtId) == -1) {
              obj = item
              arr.push(obj)
            }
          })
          townsList[key].orgChildren = []
          townsList[key].orgChildren = arr
        }
        this.townsList = townsList;
      })
    },
    getCurrentTaskDetail(taskDetail) {
      this.currentTaskDetail = taskDetail;
    },
    getCurrentTask(currentTask) {
      this.currentTask = currentTask;
    },
    getTaskIndex(taskIndex) {
      this.taskIndex = taskIndex;
    },
    showCheckDialog() {
      this.checkVisible = true;
      this.$nextTick(function () {
        this.$refs['reviewForm'].resetFields();
      })
    },
    addRejectList(item){
      if (item.state == '1') {
        item.state = '0'
      } else {
        item.state = '1'
      }
      this.$http('put',`identity/kPIVillageQuota/${item.id}id`,item,false).then(res => {
      })
    },
    reviewConfirm(value) {
      this.$refs['reviewForm'].validate(async (valid) => {
        if(valid) {
          this.confirmLoading = true;
          this.townTastObjects = [];
          this.divisionTastObjects = [];
          let result = await this.$http("GET", `/identity/cadreTaskObject/progressNext?taskObjectId=${this.currentTask.id}&isSuccess=${value}&auditor=${this.reviewForm.auditor}&auditAdvice=${this.reviewForm.auditAdvice}`, false);
          this.$message({
              type: 'success',
              message: value == "SUCCESS" ? '审核成功！' : '驳回成功！'
          });
          if (value == 'FAILED') {
            this.$http('get',`/identity/kPIVillageQuota/changeState?districtId=${this.currentTask.objectId}&taskYear=${this.currentTask.taskYear}`,false).then(res => {
            })
          }
          if (result.generateResultEnable === '1') {
              this.$confirm('所有指标均已打分且审核通过, 是否生成考核结果?', '提示', {
                  confirmButtonText: '生成',
                  cancelButtonText: '不生成',
                  type: 'warning'
              }).then(() => {
                  const loading = this.$loading({
                      lock: true,
                      text: '考核结果生成中,请稍等...',
                      background: 'rgba(0, 0, 0, 0.7)'
                  });
                  this.$http('GET',`identity/kPIStatistics/generateKpiResult?taskId=${result.taskId}`,false).then(data => {
                      setTimeout(_ => {
                          loading.close();
                          if (data) {
                              this.$message({
                                  type: 'success',
                                  message: '考核结果已生成，请前往考核结果、考核分析查看！'
                              })
                          } else {
                              this.$message({
                                  type: 'warning',
                                  message: '考核结果生成失败，该任务不存在或结果已生成！'
                              })
                          }
                      }, 500)
                  })
              }).catch(() => {
                  this.$message({
                      type: 'info',
                      message: '您可前往"考核实施/任务管理"菜单下的任务列表进行生成操作！'
                  });
              });
          }
          this.$refs.PendingTask.isShowTask = false;
          await this.$refs.PendingTask.getTaskList();
          this.isShowTaskDetail = false;
          this.confirmLoading = false
          this.checkVisible = false
        }
      })
    },
    async getIsApproved(){
      let successParam = {
        taskId: this.currentTask.taskId,
        status: '2',
        isRejected: '0'
      };
      let failedParam = {
        taskId: this.currentTask.taskId,
        status: '0',
        isRejected: '1'
      };
      let checkPendingParam = {
        taskId: this.currentTask.taskId,
        status: '1',
      }
      let commitPendingParam = {
        taskId: this.currentTask.taskId,
        status: '0',
      }
      let successList = await this.$http('POST', `/identity/cadreTaskObject/list?sort=objectId,asc`, successParam, false)
      let failedList = await this.$http('POST', `/identity/cadreTaskObject/list?sort=objectId,asc`, failedParam, false)
      let checkPendingList = await this.$http('POST', `/identity/cadreTaskObject/list?sort=objectId,asc`, checkPendingParam, false)
      let commitPendingList = await this.$http('POST', `/identity/cadreTaskObject/list?sort=objectId,asc`, commitPendingParam, false)
      this.successList = successList;
      this.failedList = failedList;
      this.uncheckedList = [...checkPendingList,...commitPendingList];
    },
    handleImage(imageUrl){
        let arr = [];
        if(imageUrl){
            if(imageUrl.indexOf(',')>-1){
                imageUrl.split(',').forEach(item => {
                    arr.push(item.split('&')[0]);
                })
            }else{
                arr.push(imageUrl.split('&')[0]);
            }
        }
        return arr;
    },
    // 查看佐证材料
    checkAttachment(imageUrl) {
      this.images = [];
      this.imagesArr = [];
      if (Array.isArray(imageUrl)) {
        let img = [];
        imageUrl.forEach(item => {
            let imageObj = {
              address: item.address,
              quarter: item.quarter
            }
          img.push(imageObj)
        })
        img.forEach(item => {
          item.address = this.handleImage(item.address)
          this.imagesArr.push(item);
        })
      } else {
        this.images = this.handleImage(imageUrl);
      }
    },
    getScore(object) {
      let quartersArr = Object.values(object);
      let totalScore = 0;
      quartersArr.forEach(item => {
         totalScore+=parseFloat(item ? item : 0)
      })
      let averageScore = totalScore/quartersArr.length;
      return averageScore.toFixed(2);
    }
  },
  computed: {
    address () {
      const { currentTaskDetail, currentTask } = this
      return {
        currentTaskDetail,
        currentTask
      }
    }
  },
  watch: {
    address: {
      handler: function(val) {
        this.images = []
        if (this.currentTask.taskType == '综合年度考核' && this.currentTask.objectType == 'Depart') {
          this.updateTownIndex(this.currentTaskDetail[this.activeTownIndex], this.activeTownIndex)
        } else {
          this.updateTownIndex(this.currentTask, this.activeTownIndex)
        }
      }
    }
  },
  created(){
    this.towns = JSON.parse(sessionStorage.getItem("towns"));
    this.getTownsList();
  }
}
</script>
<style lang="less" scoped>
  .task_detail {
    h4 {
      text-align: left;
      margin-bottom: 10px;
    }
    .task_detail_content {
      .el_card_content {
        border-radius: 0 0 4px 4px;
        border:1px solid rgba(10, 155, 26, 1);
        border-top: none;
      }
      .current_status {
        height: 20px;
        float: left;
        margin-top: 8px;
        line-height: 22px;
        border-left: 4px solid #FBC626;
        font-size: 16px;
        color: #FBC626;
        font-weight: bold;
        padding-left: 10px;
      }
      .check_button {
        text-align: center;
        float: right;
        .el-button {
          background-color: #55BD94;
          padding: 9px 15px;
          font-size: 20px;
        }
      }

    }
  }
  .townStyle{
    display: inline-block;
    margin: 0 15px 10px 15px;
    padding: 0 10px;
    border-radius: 5px;
  }
  .townStyle:hover {
    background: linear-gradient(60deg, #66aabb, #43a047);
    box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
    color: #fff;
    cursor: pointer;
  }
  .townStyleActive{
    display: inline-block;
    background:linear-gradient(-27deg,rgba(27,165,104,1),rgba(58,201,138,1));
    box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
    color: #fff;
    cursor: pointer;
  }
  .tack_quota_content {
    .el-row {
      padding: 0 15px 0 15px;
    }
    margin-top: 10px;
    .task_review_content {
      overflow: auto;
    }
    .el-col {
      height: 650px;
    }
  }
  .resultContent{
    margin-left: 10px;
  }
    .materials_content {
      height: 590px;
      overflow: auto;
    }
  .task_review .resultContent{
      overflow: auto;
      white-space: nowrap;
      line-height: 45px;
      font-size: 16px;
      text-align: center;
  }

  .task_review .resultBorder{
      border-right:1px solid #AEE3CC;
  }
  .task_review .lastResultBorder{
      border-right:1px solid #AEE3CC;
  }
  .daily_div {
      border-left:2px solid rgba(67, 192, 137, 1)!important;
      border-right:none!important;
  }
  .task_review .outDiv{
      float: left;
      border-bottom: none;
      border-right: none;
      border:2px solid rgba(67, 192, 137, 1);
      border-radius:5px;
      .table_col {
        border-bottom: 1px solid #AEE3CC;
      }
      .table_col div:last-child {
        border-right: none;
      }
  }
  .outDiv .table_col:nth-child(1) {
    background-color: #E3FCF1;
    font-weight: bold;
  }
  .outDiv>div:last-child {
    border-bottom: none!important;
  }
  .task_review .twoIndex{
      width: 300px;
      display: inline-block;
  }
  .task_review .thirdIndex{
      width: 450px;
      display: inline-block;
  }
  .third_item_detail div:last-child {
    border-right: none;
  }

  .table_right div:last-child :nth-child(n-1) {
    border-bottom: none;
  }
  .table_right div div:last-child {
    border-right: none;
  }
  .task_review .scoreIndex{
      width: 100px;
      display: inline-block;
      color: red;
      margin-left: -4px;
  }
  .task_review .cunDetail{
      width: 120px;
      display: inline-block;
      color: #43C089;
      .el-button {
        background-color: #55BD94;
      }
  }
.accordion {
  .el-collapse-item__header {
    font-size: 18px!important;
    font-weight: bold!important;
  }
}
.sonIcon {
  color: #409eff;
}
.materials_area_content {
  margin-top: 10px;
  border: 2px solid rgba(67, 192, 137, 1);
  padding: 0 10px 0 10px;
  width: 32%;
  border-radius: 5px;
  padding: 0!important;
}
.materials_area_content_img {
  background: url(../../static/img/check_materials.png) no-repeat center;
}
.materials_title {
  width:100%;
  height:54px;
  line-height: 54px;
  background:rgba(227,252,241,1);
  border-radius:5px 5px 0px 0px;
}

.materials {
  overflow: hidden;
  line-height: 2.8 !important;
  .materials_item {
    margin: 10px 10px 10px 10px;
    float: left;
    min-width: 330px;
    min-height: 350px;
    border: 2px solid #43C089;
    border-radius: 5px;
    .second_title {
      text-align: left;
      padding: 20px;
      >span {
        display: block;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
      }
      .third_title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
        div {
          overflow: hidden;
          div {
            float: left;
          }
          .third_value {
            margin-left: 15px;
            color: #f00;
          }
        }
      }
    }
  }
  .second_monitor {
    .second_title {
      padding-top: 10px;
      >span {
        height: 30px;
        line-height: 30px;
        border-left: 3px solid rgba(67, 192, 137, 1);
        padding-left: 10px;
      }
      .third_title {
        margin-bottom: 0;
        border-bottom: 1px solid rgba(67, 192, 137, 1);
      }
    }
  }
  .second_synthesis {
    .second_title {
      padding-top: 10px;
      >span {
        height: 30px;
        line-height: 30px;
        border-left: 3px solid rgba(67, 192, 137, 1);
        padding-left: 10px;
      }
    }
  }
}
.second_title .indexLabel{
    display: inline-block;
    font-size: 16px;
    width: 190px;
}
.second_title .indexValue{
    display: inline-block;
    width: 80px;
}
.second_title .weightInput{
    display: inline-block;
    min-width: 100px;
    margin: 5px 10px;
}
.second_title .tableContent{
    width: 630px;
    border-left: 1px solid #AEE3CC;
    border-top: 1px solid #AEE3CC;
    text-align: center;
    font-size: 15px;
    margin: 10px;
}
.second_title .tableResult{
    flex: 1;
    border-right: 1px solid #AEE3CC;
    border-bottom: 1px solid #AEE3CC;
}
.second_title .tableBorder{
    border-right: 1px solid #AEE3CC;
    border-bottom: 1px solid #AEE3CC;
}
.threeIndex {
  >div {
    border-bottom: 1px solid #AEE3CC;
  }
}
.threeIndex {
  >div {
    >div:last-child {
      border-right: none;
    }
  }
}
.daily_three_index {
  >div {
    border-bottom: 1px solid #AEE3CC;
  }
}
.daily_three_index div:last-child {
  border-bottom: none;
}
.threeIndex div:last-child {
  border-bottom: none;
}
.confirm_content {
  padding-top: 15px;
  .el-card {
    min-height: 330px;
    border-radius:5px;
    color: #393939!important;
    .el-col {
      padding-left: 0!important;
      padding-right: 0!important;
    }
  }
  .title_pending {
    text-align: left;
    width:100%;
    height:51px;
    line-height: 51px;
    font-size: 18px;
    border-radius:5px 5px 0px 0px;
    padding-left: 18px;
  }
  .confirm_content_pending {
    .title_pending {
      background: #FFFAED;
      border-bottom: 1px solid #FBC626;
    }
    .title_pending::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 22px;
      vertical-align: middle;
      background-color: #F6C42E;
      margin-right: 10px;
    }
    .el-card {
      border:2px solid rgba(251, 198, 38, 1);
    }
    .task_item {
      border-bottom: 1px solid #FFEDB6;
      border-right: 1px solid #FFEDB6;
    }
    .task_item:nth-child(3n) {
      border-right: none;
    }
    .task_item:nth-child(6n-2) {
      background:#FFFCF4;
    }
    .task_item:nth-child(6n-1) {
      background:#FFFCF4;
    }
    .task_item:nth-child(6n) {
      background:#FFFCF4;
    }
  }
   .confirm_content_success {
    .title_pending {
      background: #EBFFF7;
      border-bottom: 1px solid #43C089;
    }
    .title_pending::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 22px;
      vertical-align: middle;
      background-color: #43C089;
      margin-right: 10px;
    }
    .el-card {
      border:2px solid rgba(67, 192, 137, 1);
    }
    .task_item {
      border-bottom: 1px solid #43C089;
      border-right: 1px solid #43C089;
    }
    .task_item:nth-child(3n) {
      border-right: none;
    }
    .task_item:nth-child(6n-2) {
      background:#F6FFFB;
    }
    .task_item:nth-child(6n-1) {
      background:#F6FFFB;
    }
    .task_item:nth-child(6n) {
      background:#F6FFFB;
    }
  }
  .confirm_content_failed {
    .title_pending {
      background: #FDEFEF;
      border-bottom: 1px solid #FE3333;
    }
    .title_pending::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 22px;
      vertical-align: middle;
      background-color: #FE3333;
      margin-right: 10px;
    }
    .el-card {
      border:2px solid rgba(254, 51, 51, 1);
    }
    .task_item {
      border-bottom: 1px solid #FFDBDB;
      border-right: 1px solid #FFDBDB;
    }
    .task_item:nth-child(3n) {
      border-right: none;
    }
    .task_item:nth-child(6n-2) {
      background:#FFFAFA;
    }
    .task_item:nth-child(6n-1) {
      background:#FFFAFA;
    }
    .task_item:nth-child(6n) {
      background:#FFFAFA;
    }
  }
  .detail {
    display: flex;
    flex-wrap: wrap;
  }
  .task_item {
    font-size: 16px;
    width: 33.3%;
    height: 50px;
    line-height: 50px;
  }
  .image_box {
    line-height: 50px;
  }
  .detailLabel {
    font-weight: 700;
  }
}
.task_show {
  display: block;
}
.task_hidden {
  display: none;
}
.task_review_content {
  border:2px solid rgba(67, 192, 137, 1);
  border-radius:5px;
  margin: 10px;
  box-sizing: border-box;
  padding-left: 0!important;
  padding-right: 0!important;
}
</style>
<style>
    .task_detail_content   .el_card_content>.el-card__body {
      padding: 0;
      margin-left: 20px;
      margin-right: 20px;
      padding-top: 20px;
      margin-bottom: 20px;
    }
    .el-icon-picture {
      cursor: pointer;
    }
    .confirm_content .el-row .el-card p {
      margin-top: 100px;
    }
    .confirm_content   .el-card__body {
      padding: 0;
    }
    .el-collapse-item__header {
      color: #55BD94;
      font-size: 16px;
      padding-left: 10px;
      font-weight: bold;
      border-left: 3px solid #55BD94;
      border-bottom: 1px solid #AEE3CC;
      border-radius: 3px 0 0 3px;
      margin: 10px 0 0 10px;
      height: 35px;
    }
    .el-collapse-item__wrap {
      border-bottom: none;
    }
    .el-collapse {
      border-top: none;
      border-bottom: none;
    }
    .el-collapse-item__content {
      padding-top: 10px;
    }
    .materials_content::-webkit-scrollbar-thumb,
    .task_review .resultContent::-webkit-scrollbar-thumb,
    .tack_quota_content .el-col::-webkit-scrollbar-thumb {
        background-color: #5EC79E!important;
    }
    .task_review .resultContent::-webkit-scrollbar  {
      height: 12px  /*滚动条高度*/
    }
</style>
